<div class="main-container">
  <div class="row-fluid">
    <div class="span12">
      <div class="furatto-block">
        <div class="furatto-large-header">
          <div class="furatto-large-container">
            <h1 class="large-header">Base</h1>
            <p class="motto">
            Normalize.css used as an alternative for HTML 5 resets.
            </p>
            <hr/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-center">
    <p class="text-center"><a href="http://necolas.github.io/normalize.css/">Normalize.css</a> is an open-source project by <a href="https://twitter.com/necolas">Nicolas Gallagher</a> and <a href="https://twitter.com/jon_neal">Jonathan Neal</a>, in their words:</p>
    <blockquote class="content-quote">
      <p>Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset."</p>    
    </blockquote>
    <div class="furatto-block">
      <h3 class="light">Headings</h3>
      <p>Headings from 1 to 6</p>
      <h1>h1 Heading 1</h1>
      <h2>h2 Heading 2</h2>
      <h3>h3 Heading 3</h3>
      <h4>h4 Heading 4</h4>
      <h5>h5 Heading 5</h5>
      <h6>h6 Heading 6</h6>
    </div>
    <div class="furatto-block">
      <div class="row-fluid">
        <h3 class="light">Lists</h3>
        <p>List comes in many flavors, ordered lists, unordered lists. Thanks to Normalize all these elements have a basic styling and cross-browser consistency. you can extend them in your application.</p>
        <div class="span4">
          <ul>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3
            <ul>
              <li>Sub list item 1</li>
              <li>Sub list item 2</li>
              <li>Sub list item 3
              <ul>
                <li>Sub list item 1</li>
                <li>Sub list item 2</li>
                <li>Sub list item 3</li>
              </ul>
              </li>
            </ul>
            </li>
          </ul>  
        </div>
        <div class="span4">
          <ol>
            <li>List item 1</li>
            <li>List item 2</li>
            <li>List item 3
            <ol>
              <li>Sub list item 1</li>
              <li>Sub list item 2</li>
              <li>Sub list item 3
              <ol>
                <li>Sub list item 1</li>
                <li>Sub list item 2</li>
                <li>Sub list item 3</li>
              </ol>
              </li>
            </ol>
            </li>
          </ol>  
        </div>
        <div class="span4">
          <dl>
            <dt>Definition term</dt>
            <dd>Definition description</dd>

            <dt>Definition term</dt>
            <dd>Definition description</dd>
            <dd>Definition description</dd>

            <dt>Definition term</dt>
            <dt>Definition term</dt>
            <dd>Definition description</dd>
          </dl>
        </div>
      </div>
    </div>
    <div class="furatto-block">
      <div class="row-fluid">
        <h3 class="light">Alignment classes</h3>
        <p>In Furatto is really easy to align text with the alignment classes.</p>
        <p class="text-left">Left align text</p>
        <p class="text-center">Center align text</p>
        <p class="text-right">Right align text</p>
        <pre data-language="html">
           <code>
             <p class="text-left">Left align text</p>
             <p class="text-center">Center align text</p>
             <p class="text-right">Right align text</p>
           </code>
        </pre>
      </div>
    </div>
    <div class="furatto-block">
      <div class="row-fluid">
        <h3 class="light">Emphasis classes</h3>
        <p>Convenient emphasis classes for a more meaningful end.</p>
        <p class="muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p class="text-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        <pre data-language="html">
           <code>
             <p class="muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
             <p class="text-warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
             <p class="text-error">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
             <p class="text-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
             <p class="text-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
           </code>
        </pre>
      </div>
    </div>
    <div class="furatto-block">
      <div class="row-fluid">
        <h3 class="light">Blockquotes</h3>
        <p>For quoting content you can use use the blockquoute with the 'content-quote' classname.</p>
        <blockquote class="content-quote">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>            
        </blockquote>
        <pre data-language="html">
           <code>
              <blockquote class="content-quote">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                </p>            
              </blockquote>
           </code>
        </pre>
      </div>
    </div>
    <div class="furatto-block">
      <div class="row-fluid">
        <h3 class="light">Inline lists</h3>
        <ul class="inline">
          <li>First item</li>
          <li>Second item</li>
          <li>Third item</li>
        </ul>
        <pre data-language="html">
          <code>
            <ul class="inline">
               <li>First item</li>
               <li>Second item</li>
               <li>Third item</li>
            </ul>
          </code>
        </pre>
      </div>
    </div>
  </div>
</div>
